
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>偶尔皮一下</title>
    <script language="javascript"type="text/javascript" src="__STATIC__/js/jquery/jquery-1.7.2.min.js">
    </script>
</head>
<body>
<h2>偶尔皮一下</h2>

<textarea id="message" style="overflow-x:hidden" rows="10" cols="50"></textarea>
<br/>
昵称：<input type="text" id="name" size="5" value="游客"/> <input type="text" id="content"   >
<button   onclick="speak_to_all()">发送</button><!--  -->
<br/><br/>
<div id="output"></div>
</body>
<script language="javascript"type="text/javascript">
    var wsUri ="ws://132.232.19.34:9501/";
    var output;
    function init() {
        output = document.getElementById("output");
        testWebSocket();
    }
    function testWebSocket() {
        websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) {
            onOpen(evt)
        };
        websocket.onclose = function(evt) {
            onClose(evt)
        };
        websocket.onmessage = function(evt) {
            onMessage(evt)
        };
        websocket.onerror = function(evt) {
            onError(evt)
        };
    }
    function get_speak_msg(){
        var name=document.getElementById("name").value;
        var speak=document.getElementById("content").value;
        var json_msg='{"name":"'+name+'","speak":\"'+speak+'"}';
        return json_msg;
    }
    function pack_msg(type,msg){
        return '{"type":"'+type+'","msg":'+msg+'}';
    }
    function onOpen(evt) {
        append_speak("欢迎来到皮一下联盟！！！");
        speak_msg=get_speak_msg();
        send_msg=pack_msg("login",speak_msg);
        doSend(send_msg);
    }
    function onClose(evt) {
        append_speak("我走了，拜了个拜！");
    }
    function onMessage(evt) {
        append_speak(evt.data);
    }
    function onError(evt) {
        alert(evt.data);
    }
    function doSend(message) {
        websocket.send(message);
    }
    function append_speak(new_msg){
        document.getElementById("message").value=document.getElementById("message").value+new_msg+"\n";
        document.getElementById('message').scrollTop = document.getElementById('message').scrollHeight;
    }
    function speak_to_all(){
        send_msg=pack_msg("speak",get_speak_msg());
        if(document.getElementById("content").value==""){
            return;
        }
        doSend(send_msg);
        document.getElementById("content").value="";
    }

    $(function(){
        $('#content').keydown(function(event){
            if(event.keyCode==13){
                send_msg=pack_msg("speak",get_speak_msg());
                if(document.getElementById("content").value==""){
                    return;
                }
                doSend(send_msg);
                document.getElementById("content").value="";


            }

        })
    })



    init();
</script>
</html>
